<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="">-->
    <!--<link rel="stylesheet" href="">-->
    <!--<link rel="stylesheet" href="">-->
    <style>
        /*@import "";*/
        /*@import "";*/
        /*@import "";*/
        body {
              --primary-color : #3a7ac0;
              --primary-deep-color : #2f659f;
              --danger-color : #ff3300;
              --danger-deep-color : #c82a00;
              --success-color : #33bc3a;
              --success-deep-color : #29952e;
              --color : #f0f0f0;
              --active-color : #fff;
          }

        .btn {
            border: none;
            border-radius: 3px;
            padding: 8px 12px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: var(--color);
        }
        .btn-danger {
            background-color: var(--danger-color);
            color: var(--color);
        }
        .btn-success {
            background-color: var(--success-color);
            color: var(--color);
        }

        .btn-primary:hover{
            background-color: var(--primary-deep-color);
            color: var(--active-color);
        }
        .btn-danger:hover{
            background-color: var(--danger-deep-color);
            color: var(--active-color);
        }
        .btn-success:hover{
            background-color: var(--success-deep-color);
            color: var(--active-color);
        }

        /*伪元素*/
        .demo::selection {
            background-color: #3f983f;
            color: #fff;
        }
        .demo::first-letter {
            font-size: 28px;
        }

    </style>
</head>
<body>
    <p>在CSS中，可以使用CSS变量来定义和使用变量。CSS变量又被称为自定义属性（Custom Properties），通过使用--前缀来定义，并使用var()函数进行引用。</p>
    <button class="btn btn-primary">按钮1</button>
    <button class="btn btn-danger">按钮2</button>
    <button class="btn btn-success">按钮3</button>

    <p class="demo">黄河之水天上来，奔流到海不复回</p>
</body>
</html>